<template>
  <div class="m-window" style="color: #949494;">
    <el-row :gutter="10" class="header-btns-col">
        <el-col :span="2">
          <el-button type="primary" @click="returnAgo">返回</el-button>
        </el-col>           
    </el-row>
    <el-row :gutter="10" class="footer-btns-col" v-show="pageSourceCode != 'myProcessed'">
        <el-col :span="2">
          <el-button type="primary" @click="pass">受理</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="sendBack">退回</el-button>
        </el-col>        
    </el-row>  
    <!--客服受理 天进宝-->
    <!-- <el-row :gutter="10" style="margin:8px auto;">
      <el-col :span="2">
        <el-button type="primary" @click="returnAgo">返回</el-button>
      </el-col>
      <el-col :span="2" v-show="pageSourceCode != 'myProcessed'">
        <el-button type="primary" @click="pass">受理</el-button>
      </el-col>
      <el-col :span="2" v-show="pageSourceCode != 'myProcessed'">
        <el-button type="primary" @click="sendBack">退回</el-button>
      </el-col>
    </el-row> -->
    <el-row>
      <el-col :span="12">
        <!-- 天进宝 -->
        <emphasisTable :list="general1" v-show="showShort"></emphasisTable>
        <!-- 月有钱 -->
        <emphasisTable :list="general2" v-show="!showShort"></emphasisTable>
        <!-- 月有钱编辑部分 -->
        <div v-show="!showShort">
           <el-form :v-model="longServiceTableForm" >
                <el-form-item>
                    <table class="emphasis-table">
                      <tr>
                          <th>利率(不含税)：</th>
                          <td v-if="pageSourceCode != 'myProcessed'">
                            <div class="flexs">
                              <el-input
                                  v-model="longServiceTableForm.rate"
                                  placeholder="输入利率(不含税)"
                                  type="number"
                                  @keyup.native="sDigit()"
                              ></el-input>
                              <span>%/年</span>
                            </div>
                          </td>
                          <td v-else>{{longServiceTableForm.rate}} %/年</td>
                      </tr>
                      <!-- <tr>
                          <th>融资金额：</th>
                          <td>
                            <el-input
                                v-model="longServiceTableForm.actAmt"
                                placeholder="输入融资金额"
                            ></el-input>
                          </td>
                      </tr> -->
                      <tr>
                          <th>保理服务费率(不含税)：</th>
                          <td v-if="pageSourceCode != 'myProcessed'">
                            <div class="flexs">
                              <el-input
                                  v-model="longServiceTableForm.serviceRate"
                                  placeholder="输入保理服务费率"
                                  type="number"
                                  @keyup.native="sDigit()"
                              ></el-input>
                              <span>%/年</span>
                            </div>
                          </td>
                          <td v-else>{{longServiceTableForm.serviceRate}} %/年</td>
                      </tr>
                    </table>
                </el-form-item>
            </el-form>
        </div>
        <!-- 底部公共部分 -->
        <emphasisTable :list="general3" style="margin-top:20px;"></emphasisTable>
        
      </el-col>
    </el-row>
    <el-row v-show="!showShort">
      <el-col :span="12">
        <el-form :model="longServiceTableoptionForm" ref="longServiceTableoptionForm">
          <el-form-item prop="note" style="margin-top:-4px;">
            <label style="color:#A7A7A7;">
              受理结果意见&nbsp;
              <i class="el-icon-warning"></i>
              <span style="color:red;">(必须包含融资金额和融资期限)</span>
            </label>
            <el-input type="textarea" v-model="longServiceTableoptionForm.note" placeholder="受理结果意见"  :disabled="pageSourceCode == 'myProcessed'"/>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form :model="serviceAcceptShortForm" ref="serviceAcceptShortForm">
          <el-form-item prop="note" style="margin-top:-4px;">
            <label style="color:#A7A7A7;">
              退回原因 &nbsp;
              <i class="el-icon-warning"></i>
            </label>
            <el-input type="textarea" v-model="serviceAcceptShortForm.note" placeholder="退回原因" :disabled="pageSourceCode == 'myProcessed'"/>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="less" scoped>
.m-window{
    padding: 50px 0;
    overflow: auto;
    overflow-x: hidden;
    .footer-btns-col,.header-btns-col{
      position:fixed;
      height: 60px;
      width: 100%;
      bottom: 0;
      z-index: 10;
      margin-left: -11px !important;
      box-sizing:border-box;
      display: flex;
      justify-content: center;
      align-items:center;
      background: #fff;
      padding: 10px 0;
      border-top: 1px solid #eee;
      /deep/ .el-button{
        margin-left: -84px;
      }
    }
    .header-btns-col{
      top: 0;
      justify-content: flex-start;
      border-top: none;
      border-bottom: 1px solid #eee;
      margin-top: 100px;
      /deep/ .el-button{
        margin-left: 8px;
      }
    }
}

.emphasis-table {
        width: 100%;
        margin-top: 10px;
        td,
        th {
            border: 1px solid #eee;
            padding: 0 10px;
            height: 38px;
            width: 50%;
            text-align: right;
        }
        & tr:nth-child(even) th,
        & tr:nth-child(even) td {
            background: #f9fafa;
        }
        .font-underline {
            text-decoration: underline;
        }
        .hit {
            color: #409eff !important;
        }
        td {
            text-align: left;
            & /deep/.el-input {
              width: 80%;
            .el-input__inner {
                border: none !important;
                outline-style: none !important;
                height: 35px;
                line-height: 35px;
                margin-left: -10px;
            }
            .el-input__icon {
                margin-left: -10px;
                margin-top: -2px;
            }
            }
        }
    }
    .flexs{
      display: flex;
    }
    
</style>
<script>
import Vue from "vue";
import { mapState, mapActions } from "vuex";
import EmphasisTable from "@/components/emphasisTable.vue";
import { formatPrice, formatRate,numberMul } from "@/util/format.js";
import { showAlert } from "lesso-common/public/utils"
export default {
  props:['pageSourceCode'],
  data() {
    return {
      showShort: true,
      applyInf: {
        itemNo: "",
        finType: "",
        applyAmt: "",
        prepaybackDate: "",
        payDate:"",
        serviceRate: "",
        custName: "",
        custUser: "",
        custPhone: "",
        applyUser: "",
        applyPhone: "",
        finLMonth: ""
      },
      serviceAcceptShortForm: {
        result: 3, //0 未到达、1 待审批、2 通过 、3 退回
        note: "" //退回原因
      },
      examinePass: 2, //2 通过
      examineNotgo: 3, //3 退回
      linkName: "act_fin_lawyer_accept", //流程环节名称
      applyId: "", //申请ID
      flowStepCode: 0, //步骤码
      longServiceTableForm:{  //月有钱编辑对象
        rate:"",
        serviceRate:"",
        actAmt:0,
        
      },
      longServiceTableoptionForm:{ //月有钱处理意见
        note:"",
        result:2
      },
      finType:"",//判断是月有钱还是天进宝
      general1: [
        {
          name: "流程编号：",
          text: "",
          isHit: true,
          isUnderline: true,
          code: "itemNo"
        },
        {
          name: "融资产品：",
          text: "天进宝",
          code: "finType"
        },
        {
          name: "融资金额：",
          text: "",
          code: "applyAmt"
        },
        {
          name: "融资开始日期：",
          text: "",
          code: "payDate"
        },
        {
          name: "融资到期日期：",
          text: "",
          code: "prepaybackDate"
        },
        {
          name: "利率(含税)",
          text: "",
          code: "serviceRate"
        }
      ],
      general2: [
        {
          name: "流程编号：",
          text: "",
          isHit: true,
          isUnderline: true,
          code: "itemNo"
        },
        {
          name: "融资产品：",
          text: "月有钱",
          code: "finType"
        },
        {
          name: "融资月数：",
          text: "",
          code: "finLMonth"
        }
      ],
      general3: [
        {
          name: "供应商：",
          text: "",
          code: "custName"
        },
        {
          name: "申请人：",
          text: "",
          code: "custUser"
        },
        {
          name: "申请人手机：",
          text: "",
          isHit: true,
          code: "custPhone"
        },
        {
          name: "金融客服：",
          text: "",
          code: "applyUser"
        },
        {
          name: "客服电话：",
          text: "",
          isHit: true,
          code: "applyPhone"
        }
      ]
    };
  },
  components: {
    EmphasisTable
  },
  created() {
    this.applyId = this.supplyChainFinance.role.ID;
    let params = new Object();
    let that = this;
    params = {
      id: that.applyId
    };
    that.$http.getApplyInfo(params).then(response => {
        if (response.data.code == 200) {
          let data = response.data.rows;
          console.log(data)
          this.finType=data.finType;
          for (var prop in that.applyInf) {
            that.applyInf[prop] = data[prop];
          }
          if (data.finType == 0) {
            //天进宝
            this.showShort = true;
            that.general1.forEach(element => {
              if (element.code != "finType") {
                element.text = that.applyInf[element.code];
              }
              if (element.code == "applyAmt") {
                element.text = formatPrice(element.text);
              } else if (element.code == "prepaybackDate" ||element.code == "payDate") {
                element.text = this.$utils.dateFormat(
                  "yyyy-MM-dd",
                  element.text
                );
              } else if (element.code == "serviceRate") {
                element.text = formatRate(element.text) + "/天";
              }
            });
          } else {
            //月有钱
            this.showShort = false;
            that.general2.forEach(element => {
              if (element.code != "finType") {
                element.text = that.applyInf[element.code];
              }
              if (element.code == "finLMonth") {
                element.text = element.text + "个月";
              }
            });
          }
          //判断是否从我得已办列表进入
          if(this.pageSourceCode == 'myProcessed'){
            this.longServiceTableForm.rate = numberMul(data.rate,100)
            this.longServiceTableForm.serviceRate=numberMul(data.serviceRate,100)
          }

          that.general3.forEach(element => {
            element.text = that.applyInf[element.code];
          });
        } else {
        }
      })
      .catch(errror => {
        that.$alert("查询对账列表失败，请检查网络！", {
          confirmButtonText: "确定",
          customClass: "alertFailure"
        });
      });
  },
  computed: {
    ...mapState(["supplyChainFinance",'supplierApplyList'])
  },
  methods: {
    ...mapActions(["changeTOdo","changeMyProcessedCTCode"]),
    commonUpdate() {
      let that = this;
      let parameter
     
      if(this.finType==1&&that.longServiceTableoptionForm.note){
        parameter = Object.assign(
            {},
            {
              name: that.linkName,
              applyId: that.applyId
            },
            that.longServiceTableoptionForm
          );
      }else{
        parameter = Object.assign(
          {},
          {
            name: that.linkName,
            applyId: that.applyId
          },
          that.serviceAcceptShortForm
        );
      }
      that.$http.commonUpdate(parameter).then(({ data }) => {
          if (data.code == 200) {
            showAlert({
              msg: `操作成功！`,
              type: 1
            });
            that.changeTOdo({ isMyToDoList: 0 });
          } else {
            showAlert({
              msg: `操作失败：${data.info}`,
              type: 0
            });
          }
        })
        .catch(error => {
          this.$alert("查询失败，请检查网络！", {
            confirmButtonText: "确定",
            customClass: "alertFailure"
          });
        });
    },
    pass() {
       if(this.finType==1){
         if(this.longServiceTableForm.rate==''){
            this.$alert("请输入利率", {
              confirmButtonText: "确定",
              customClass: "alertFailure"
            });
            return
          }
          if(this.longServiceTableForm.serviceRate==''){
            this.$alert("请输入服费率", {
              confirmButtonText: "确定",
              customClass: "alertFailure"
            });
            return
          }
          if(this.longServiceTableForm.rate<=0){
            this.$alert("请输入大于0的利率", {
              confirmButtonText: "确定",
              customClass: "alertFailure"
            });
            return
          }
          if(this.longServiceTableForm.serviceRate<=0){
            this.$alert("请输入大于0的服费率", {
              confirmButtonText: "确定",
              customClass: "alertFailure"
            });
            return
          }
          if(this.longServiceTableoptionForm.note==''){
            this.$alert("请填写受理意见", {
              confirmButtonText: "确定",
              customClass: "alertFailure"
            });
            return
          }
       }
      this.$confirm("是否确认通过？")
        .then(_ => {
          this.serviceAcceptShortForm.result = this.examinePass;
          this.serviceAcceptShortForm.note = "";
          this.flowStepCode = "act_fin_lawyer_accept";
          if(this.finType==1){
            this.signature();
          }else{
            this.commonUpdate();
          }
          
        })
        .catch(_ => {});
    },
    returnAgo() {
      if(this.pageSourceCode == 'myProcessed'){
        this.changeMyProcessedCTCode('')
      }else{
        this.changeTOdo({ isMyToDoList: 0 });
      }
    },
    sendBack() {
      if (!this.serviceAcceptShortForm.note) {
        showAlert({
          msg: "请填写退回原因",
          type: 2
        });
        return;
      }
      this.$confirm("是否确认退回？").then(_ => {
        this.serviceAcceptShortForm.result = this.examineNotgo;
        this.longServiceTableoptionForm.note=""
        this.flowStepCode = 0;
        this.commonUpdate();
      });
    },
    //月有钱申请修改
    signature(){
        let that = this
        var params={
            'id':that.applyId,
            'rate':that.longServiceTableForm.rate/100,
            'serviceRate':that.longServiceTableForm.serviceRate/100,
            'actAmt':that.longServiceTableForm.actAmt,
        }
        that.$http.tblFinSrmApplyInfo(params).then(({data})=>{
            if(data.code == 200){
                that.commonUpdate()          
            }else{
                showAlert({
                    msg: `操作失败：${data.info}`,
                    type: 0
                })
            }
        }).catch((error)=>{
            this.$alert("查询失败，请检查网络！", {
                confirmButtonText: "确定",
                customClass: "alertFailure"
            })
        })
    },
   sDigit() { 
        this.longServiceTableForm.rate=this.longServiceTableForm.rate.replace(/[^(\d|.)]/g,"");
        this.longServiceTableForm.serviceRate=this.longServiceTableForm.serviceRate.replace(/[^(\d|.)]/g,""); 
    } 
  }
};
</script>



